{% extends 'base.html' %}
{% load site_tags %}

{% block title %}{{ program.title }} — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-8">
        <span class="badge text-bg-primary mb-2">Skill Certification</span>
        {% if program.category %}
        <span class="badge bg-primary-subtle text-primary mb-2">{{ program.category.name }}</span>
        {% endif %}
        <h2 class="fw-bold mb-3">{{ program.title }}</h2>
        <p class="lead text-muted">{{ program.short_description }}</p>
        <div class="mb-4" style="white-space:pre-line;">{{ program.full_description }}</div>
        <div class="row g-3">
          <div class="col-md-3">
            <div class="border rounded-4 p-3 h-100">
              <div class="text-muted small">Exam</div>
              <div class="fw-bold">{{ program.questions_per_exam }} random MCQs</div>
              <div class="small text-muted">from {{ program.min_question_bank }}+ bank</div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="border rounded-4 p-3 h-100">
              <div class="text-muted small">Time limit</div>
              <div class="fw-bold">{{ program.time_limit_minutes }} min</div>
              <div class="small text-muted">~{% widthratio program.time_limit_minutes program.questions_per_exam 60 %} sec / Q</div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="border rounded-4 p-3 h-100">
              <div class="text-muted small">Passing score</div>
              <div class="fw-bold">{{ program.passing_score }}%</div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="border rounded-4 p-3 h-100">
              <div class="text-muted small">Attempts</div>
              <div class="fw-bold">{{ program.max_attempts }} total</div>
              <div class="small text-muted">1 try + {{ program.max_reattempts_after_fail }} reattempts</div>
            </div>
          </div>
        </div>
        {% if program.require_proctor %}
        <div class="alert alert-light border mt-4 small mb-0">
          <strong>Live proctoring required.</strong>
          Remote candidates join a meeting with a teacher/consultant, receive an unlock code, then take the exam.
        </div>
        {% endif %}
      </div>
      <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4">
            <div class="fs-3 fw-bold text-primary mb-1">{% format_price program.fee %}</div>
            <div class="text-muted small mb-2">Certification fee</div>
            <div class="fw-semibold mb-1">{% format_price program.effective_reattempt_fee %}</div>
            <div class="text-muted small mb-3">Reattempt fee (if you score below {{ program.passing_score }}%)</div>
            <ul class="small text-muted mb-4">
              <li>For candidates with skills who need a formal certificate</li>
              <li>Book a slot at a <strong>TSN Digital Center</strong> or take the exam remotely</li>
              <li>Pay → schedule → unlock code → MCQ exam</li>
              <li>Pass requires {{ program.passing_score }}% or higher</li>
              <li>Up to {{ program.max_reattempts_after_fail }} paid reattempts after a fail</li>
              <li>Unique verification code on each certificate</li>
            </ul>
            {% if user.is_authenticated and user.role == 'student' %}
              {% if application %}
                <a href="{% url 'certifications:my_certs' %}" class="btn btn-outline-primary w-100">Go to my certifications</a>
              {% else %}
                <a href="{% url 'certifications:apply' program.slug %}" class="btn btn-primary w-100 fw-semibold">Apply &amp; pay for exam</a>
              {% endif %}
            {% elif user.is_authenticated %}
              <div class="alert alert-light border small mb-0">Only student accounts can apply for certifications.</div>
            {% else %}
              <a href="{% url 'accounts:login' %}?next={{ request.path }}" class="btn btn-primary w-100">Login to apply</a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}